<script setup lang="ts">

import TeamType from "../models/team.d.ts";
import {teamStatusEnum} from "../constants/team.ts";
import {useRouter} from "vue-router";
import myAxios from "../plugins/myAxios.ts";
import {showFailToast, showSuccessToast} from "vant/lib/vant.es";
import mouse from '../assets/vue.svg';
import {onMounted, ref} from "vue";
import {getCurrentUser} from "../services/user.ts";


interface UserCardListProps {
  teamList: TeamType[];
}

// 是否展示提示框
const showPasswordDialog = ref(false);

const joinTeamId = ref(0);
const password = ref('');

// withDefaults 默认值,防止当前没有传入teamList时，报错
const props = withDefaults(defineProps<UserCardListProps>(), {
  //@ts-ignore
  teamList: [] as TeamType[],

});


const router = useRouter();

// dialog输入框置空
const doJoinCancel = () =>{
  joinTeamId.value = 0;
  password.value = '';
}

/**
 * 加入队伍
 */
// const doJoinTeam = async (id: number) => {
const doJoinTeam = async () => {
  if (!joinTeamId.value) {
    return;
  }
  const res = await myAxios.post('/team/join', {
    teamId: joinTeamId.value,
    password: password.value
  });
  if (res?.code === 0) {
    showSuccessToast('加入成功');
    doJoinCancel();
  } else {
    showFailToast("加入失败" + (res.description ? `,${res.description}` : ''));
  }
}


// 当前用户
const currentUser = ref();

onMounted(async () => {
  currentUser.value = await getCurrentUser();
})


const preJoinTeam = (team: TeamType) => {
  joinTeamId.value = team.id;
  if (team.status === 0) {
    // 如果是要查公开的队伍，直接调用查询
    doJoinTeam();
  } else {
    showPasswordDialog.value = true;
  }
}


/**
 * 跳转至更新队伍页面
 * @param id
 */
const doUpdateTeam = (id: number) => {
  router.push({
    path: '/team/update',
    query: {
      id,

    }
  })

};
/**
 * 退出队伍
 * @param id
 */
const doQuitTeam = async (id: number) => {
  const res = await myAxios.post('/team/quit', {
    teamId: id,
  });
  if (res?.code === 0) {
    showSuccessToast('退出成功');
  } else {
    showFailToast("退出失败" + (res.description ? `,${res.description}` : ''));
  }
};


const doDeleteTeam = async (id: number) => {

  const res = await myAxios.post('/team/delete', {
    id,
  });
  if (res?.code === 0) {
    showSuccessToast('解散成功');
  } else {
    showFailToast("解散失败" + (res.description ? `,${res.description}` : ''));
  }
};


</script>

<template>
  <!--  标签搜索获取的结果商品卡片展示 -->
  <van-card
      v-for="team in props.teamList"
      :desc="team.description"
      :title="`${team.name}`"
      :thumb="mouse"
  >
    <template #tags>
      <van-tag plain type="danger" style="margin-right: 8px; margin-top: 8px">
        {{
          teamStatusEnum[team.status]
        }}
      </van-tag>

    </template>
    <template #bottom>
      <div>
<!--        {{ '最大人数:' + team.maxNum }}-->
        {{ `队伍人数: ${team.hasJoinNum}/${team.maxNum}` }}

      </div>
      <div v-if="team.expireTime">
        {{ '过期时间:' + team.expireTime }}
      </div>
      <div>
        {{ "创建时间:" + team.createTime }}
      </div>

    </template>

    <template #footer>
      <!--      加入队伍按钮
      仅非队伍创建人且未加入队伍的人可见-->
      <!--      <van-button size="small" type="primary" plain v-if="team.userId !== currentUser?.id && !team.hasJoin"-->
      <!--                  @click="doJoinTeam(team.id)">加入队伍-->
      <!--      </van-button>-->
      <van-button size="small" type="primary" plain v-if="team.userId !== currentUser?.id && !team.hasJoin"
                  @click="preJoinTeam(team)">加入队伍
      </van-button>
      <!--      判断当前队伍是否是当前用户的队伍，如果是，则可以更新队伍信息   -->
      <van-button v-if="team.userId === currentUser?.id" size="small" plain
                  @click="doUpdateTeam(team.id)">更新队伍
      </van-button>


      <!--  退出队伍按钮
         仅加入队伍可见 -->
      <van-button size="small" plain v-if="team.hasJoin"
                  @click="doQuitTeam(team.id)">退出队伍
      </van-button>

      <!--  解散队伍按钮
          判断当前队伍是否是当前用户的队伍，如果是，则可以解散队伍信息   -->
      <van-button v-if="team.userId == currentUser?.id" size="small" type="danger" plain
                  @click="doDeleteTeam(team.id)">解散队伍
      </van-button>


    </template>
  </van-card>

  <!--  dialog弹出框-->
  <van-dialog v-model:show="showPasswordDialog" title="请输入密码" show-cancel-button @confirm="doJoinTeam"
              @cancel="doJoinCancel">
    <van-field v-model="password" placeholder="请输入密码"/>
  </van-dialog>
</template>

<style scoped>
#teamCardList :deep(.van-image__img) {
  height: 128px;
  object-fit: unset;
}
</style>